<template>
<div class="box">
  <span class="bg-purple">
    <p>18</p>
    <p class="p1">今日参加活动人次</p>
    <img src="../../../../image/main-beijing-18-jianbiantiao.png" alt="" class="img1">
    <img src="../../../../image/main-beijing-18-jianbiankuai1.png" alt="" class="img2">
    </span>
  <span class="bg-purple1">
     <p>￥2330.00</p>
    <p class="p1">今日参加活动人次</p>
    <img src="../../../../image/main-beijing-18-jianbiantiao2.png" alt="" class="img1">
  <img src="../../../../image/main-beijing-2330-jianbiankuai1.png" alt="" class="img2">
  </span>
  <span class="bg-purple2">
     <p>18</p>
    <p class="p1">今日参加活动人次</p>
    <img src="../../../../image/main-beijing-18-jianbiantiao.png" alt="" class="img1">
    <img src="../../../../image/main-beijing-18-jianbiankuai2.png" alt="" class="img2">
    </span>
  <span class="bg-purple3">
     <p>￥2330.00</p>
    <p class="p1">今日参加活动人次</p>
    <img src="../../../../image/main-beijing-18-jianbiantiao.png" alt="" class="img1">
    <img src="../../../../image/main-beijing-2330-jianbiankuai2.png" alt="" class="img2">
    </span>
</div>

</template>

<script>
export default {

}
</script>

<style lang='less'>
.el-container .is-vertical .el-main{
padding:0px;
}
.box{
    width: 1240px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  
  }
 .bg-purple{
    background:url(../../../../image/main-beijing-18.png) no-repeat -15px 0;
    width: 290px;
    height: 160px;
    position: relative;
   margin: 20px 10px 20px 0;
   display: inline-block;
  
  }
  .bg-purple1{
    background:url(../../../../image/main-beijing-2330.png) no-repeat -15px 0;
    width: 290px;
    height: 160px;
    position: relative;
   display: inline-block;
  

  }
  .bg-purple2{
    background:url(../../../../image/main-beijing-18-2.png) no-repeat -15px 0;
     width: 290px;
    height: 160px;
    position: relative;
   display: inline-block;

  }
  .bg-purple3{
    background:url(../../../../image/main-beijing-2330-2.png) no-repeat -15px 0;
    width: 290px;
    height: 160px;
    position: relative;
   display: inline-block;


  }

  .img1{
    position: absolute;
    bottom: 20px;
    left: 50px;
  }
  .img2{
     position: absolute;
     width: 70px;
     height: 4px;
    bottom:20px;
    left: 125px;
  }
  p{
      font-size: 36px;
      color: #fff;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      font-weight: bold;
      position: absolute;
      top: 30px;
      left: 40px;
    }
    .p1{
       font-size: 18px;
      color: #fff;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      font-weight: bold;
        position: absolute;
      top: 72px;
      left: 40px;
    }
</style>